<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <div class="row">
      <div class="label">导出的文件名：</div>
      <el-input v-model="fileName" clearable placeholder="请输入" class="value" />
    </div>
    <el-checkbox-group v-model="checkList" @change="checkListChange">
      <el-checkbox v-for="(item,index) in colNameArr21" :key="index" :label="item.prop">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <div class="box-export">
      <div>要导出的列名排列：</div>
      <div>
        <span v-for="(item,index) in selectColNameArr" :key="index" class="name">{{ item.label }}<i v-if="selectColNameArr.length > index + 1"> -- </i></span>
      </div>
    </div>
    <span slot="footer">
      <el-button @click="modelClose">取 消</el-button>
      <el-button type="primary" icon="el-icon-download" :loading="exportExcelLoading" @click="submitForm">确定导出</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { postAction } from '@/api/manage'
import excel from 'lay-excel'
export default {
  components: {},
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      visible: false,
      exportExcelLoading: false,
      updateState: '',
      fileName: '',
      title: '',
      checkList: [],
      colNameArr21: [],
      selectColNameArr: [],
      queryParam: {},
      width: '1000px',
      url: {
        update: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 导出数据
    exportExcelData() {
      if (!this.fileName) {
        this.$message.warning('请输入导出的文件名')
        return
      }
      this.exportExcelLoading = true
      this.queryParam.pageSize = this.queryParam.total
      postAction('newTable.aspx?action=GetList', this.queryParam).then((res) => {
        if (res.code === 1) {
          this.createExcel(res.data.list)
        } else {
          this.exportExcelLoading = false
        }
      }).finally(() => {
        this.exportExcelLoading = false
      })
    },
    // 生成excel
    createExcel(data) {
      if (data.length === 0) {
        this.$message.info('无数据可导出')
        this.exportExcelLoading = false
        return
      }
      // 过滤需要的列
      const filterColNameArr = [...this.checkList]
      data = excel.filterExportData(data, filterColNameArr)
      console.log('导出的数据data', data)
      // 显示动态列名
      const nameObj = {}
      filterColNameArr.forEach(obj => {
        nameObj[obj] = this.colNameArr21.find(v => v.prop === obj).label
      })
      // 加列头
      data.unshift(nameObj)
      // 执行导出函数，系统会弹出弹框
      excel.exportExcel(
        {
          sheet1: data
        },
        // `导出账号数据${this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`,
        `${this.fileName}.xlsx`,
        'xlsx'
      )
      this.exportExcelLoading = false
      this.$message.success('导出成功！')
    },
    checkListChange(z) {
      const newArr = []
      z.forEach(prop => {
        const obj = this.colNameArr21.find(v => v.prop === prop)
        newArr.push(obj)
      })
      this.selectColNameArr = newArr
    },
    show() {
      this.updateState = 'add'
      this.visible = true
      this.model = {}
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
    },
    submitForm() {
      if (this.selectColNameArr && this.selectColNameArr.length) {
        this.exportExcelData()
      } else {
        this.$message.warning('请选择要导出的列')
      }
    },
    modelClose() {
      this.visible = false
    },
    handleCancel(done) {
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 0 30px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
}
.box-export{
  display: flex;
  align-items: center;
  margin-top: 20px;
  div:nth-child(1) {
    min-width: 130px;
  }
  .name{
    color: #66b1ff;
    font-size: 18px;
  }
}
.row{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  .label{
    width: 100px;
  }
  .value{
    width: 300px;
  }
}
</style>
